<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/bootstrap/css/bootstrap.min.css' />
  <link rel='stylesheet' href='/font-awesome/css/font-awesome.min.css' />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12 m-auto">
        <h1> <%= title %> <small> <a href="/swagger" target="_blank">swagaga</a></small></h1>

        <div class="input-group mb-3">
          <input class="form-control" id="ip" placeholder="add one">
          <div class="input-group-append">
            <button class="btn btn-info" id="add-ls">
              <i class="fa fa-plus" aria-hidden="true"></i>
            </button>
          </div>
        </div>

        <table class="table">
          <thead class="thead-light">
            <tr>
              <th scope="col">#_id</th>
              <th scope="col">msg</th>
              <th scope="col" class="text-center">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr>
              <th scope="row">1</th>
              <td>msg</td>
              <td class="text-center text-nowrap">
                <button class="btn btn-primary">update</button>
                <button class="btn btn-danger">del</button>
              </td>
            </tr> -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">_id:
            <span></span>
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input class="form-control" id="newVal">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
          <button type="button" class="btn btn-primary" id="submitNewVal">
            <i class="fa fa-check" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <script src="/jquery/jquery.min.js"></script>
  <script src="/bootstrap/js/bootstrap.min.js"></script>
  <script>
    function findAll() {
      // find
      $.ajax({
        url: "/example/find-mongo",
        async: false
      }).then(res => {
        // console.log(res);
        res.data.forEach(item => {
          $('table > tbody').append(`          
            <tr id="${item._id}">
              <th scope="row">${item._id}</th>
              <td>
                <input readonly class="form-control-plaintext" value="${item.msg}">
              </td>
              <td class="text-center text-nowrap">
                <button class="btn btn-primary" data-id="${item._id}"  data-toggle="modal" data-target="#exampleModal">
                  <i class="fa fa-pencil" aria-hidden="true"></i>
                </button>
                <button class="btn btn-danger" data-id="${item._id}">
                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                </button>
              </td>
            </tr>
          `)
        })
      })
    }

    $(document).ready(function () {
      findAll()

      // add
      $("#add-ls").click(() => {
        // console.log($('#ip').val())
        if ($('#ip').val())
          $.ajax({
            url: "/example/add-mongo?msg=" + $('#ip').val(),
            method: 'post',
            async: false
          }).then(res => {
            // console.log(res);
            $('table > tbody').append(`
              <tr id="${res.data._id}">
                <th scope="row">${res.data._id}</th>
                <td>
                  <input readonly class="form-control-plaintext" value="${res.data.msg}">
                </td>
                <td class="text-center text-nowrap">
                  <button class="btn btn-primary data-id="${res.data._id}" data-toggle="modal" data-target="#exampleModal">
                    <i class="fa fa-pencil" aria-hidden="true"></i>  
                  </button>
                  <button class="btn btn-danger" data-id="${res.data._id}">
                    <i class="fa fa-trash-o" aria-hidden="true"></i>
                  </button>
                </td>
              </tr>
            `)
          })
      })

      // del
      $(document).on('click', '.btn-danger', (e) => {
        let _id = e.currentTarget.dataset.id;
        // console.log(e.currentTarget.dataset.id)
        $.ajax({
          url: "/example/del-mongo?_id=" + _id,
          method: 'post',
          async: false
        }).then(res => {
          $('#' + _id).remove();
        })
      })

      // update
      $("#submitNewVal").click(() => {
        let _id = $('#exampleModalLabel span').text();
        let val = $('#newVal').val()
        // console.log(_id, val);
        if (val == '') {
          alert("giao");
        } else {
          $.ajax({
            url: "/example/update-mongo?_id=" + _id + "&msg=" + val,
            method: 'post',
            async: false
          }).then(res => {
            $("table tbody").empty();
            findAll();
          })
        }
      })

      $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget)
        var recipient = button.data('id')
        // console.log(recipient);
        var modal = $(this)
        modal.find('.modal-title span').text(recipient)
        // modal.find('.modal-body input').val(recipient)
      })

    })
  </script>
</body>

</html>